import {defineComponent, PropType, reactive, watch} from 'vue'

export const DrawerContent = defineComponent({
  props: {
    loading: Boolean
  },
  setup(props, {slots}) {
    return () => (
      <div class='custom-drawerContent w-full h-full relative p-16 overflow-hidden pb-60'>
        {props.loading ? null : slots.default?.()}
        <a-spin spinning={props.loading} />
      </div>
    )
  }
})

export const DrawerFooter = defineComponent({
  setup(props, {slots}) {
    return () => (
      <div class='w-full h-60 absolute bottom-0 left-0 bg-white border-t-1 border-cardLine p-12 z-10'>
        {slots.default?.()}
      </div>
    )
  }
})

const DrawTemp = defineComponent({
  name: 'TargetLibImportDrawer',
  props: {
    title: {
      type: String,
      default: '指标库导入'
    },
    placement: {
      type: String as PropType<'top' | 'right' | 'bottom' | 'left'>,
      default: 'right'
    },
    visible: {
      type: Boolean,
      deafult: false
    }
  },
  emits: {
    'update:visible': (data: boolean): boolean => true
  },
  setup(props, {emit}) {
    let state = reactive<{
      visible: boolean
    }>({
      visible: false
    })

    watch(
      () => props.visible,
      n => {
        state.visible = n
      },
      {immediate: true}
    )

    watch(
      () => state.visible,
      n => {
        emit('update:visible', n)
      }
    )

    return () => (
      <a-drawer
        v-model={[state.visible, 'visible']}
        title={props.title}
        placement={props.placement}
        width={500}
      >
        <DrawerContent>
          <DrawerFooter></DrawerFooter>
        </DrawerContent>
      </a-drawer>
    )
  }
})
